<template>
  <div class="floating-button">
    <slot name="button">
      <!-- <div 
        class="button-content" 
        @click.prevent.stop="handleClick"
        type="button"
      >
        <van-icon :name="icon" :size="iconSize" />
        <span class="button-title">{{ title }}</span>
      </div> -->
      <van-floating-bubble v-model:offset="offset" axis="xy" icon="description" magnetic="x" @click.prevent.stop="handleClick" />
    </slot>
    <van-popup v-model:show="showPopup" position="bottom" :style="{ height: popupHeight }" round closeable
      @click-overlay="handleClose" @click-close-icon="handleClose" teleport="body">
      <slot name="popup-content"></slot>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  icon: {
    type: String,
    default: 'chat'
  },
  iconSize: {
    type: [String, Number],
    default: 20
  },
  title: {
    type: String,
    default: '查看日志'
  },
  height: {
    type: String,
    default: '80vh'
  }
});

const emit = defineEmits(['click']);
const showPopup = ref(false);
const popupHeight = ref(props.height);

const handleClick = () => {
  showPopup.value = true;
  emit('open');
};

const handleClose = () => {
  showPopup.value = false;
  emit('close');
};

// Expose methods to parent component
defineExpose({
  handleClick,
  handleClose,
  showPopup
});

const offset = ref({ x: '100%', y: 600 });
</script>

<style lang="less" scoped>
.floating-button {
  position: fixed;
  bottom: 140px;
  left: 10px;
  z-index: 999;

  .button-content {
    padding: 8px 16px;
    background: #0069d9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: white;
    cursor: pointer;
    user-select: none;
    border: none;
    outline: none;

    .button-title {
      font-size: 14px;
      white-space: nowrap;
    }

    &:active {
      background: darken(#0053D9, 10%);
    }
  }
}

:deep(.van-popup) {
  padding: 16px;
}

:deep(.van-popup__close-icon) {
  color: #666;
}
</style>
